<template>
    <div class="assy">  	
      <!--<el-table :data="tableData" height="140" style="width: 100%">
		    <el-table-column prop="province" label="省（直辖市）" width="" align="center">
		    	<template #default="scope">
						<span class="fontColor1">{{scope.row.province}}</span>
					</template>
				</el-table-column>
		    <el-table-column prop="num" label="数量" width="" align="center">
		    	<template #default="scope">
						<span class="fontColor">{{scope.row.num}}</span>
					</template>
				</el-table-column>		    
		  </el-table>-->
      <div class="table">
        <div class="table-header">
            <span>省(直辖市)</span>
            <span>新建工程</span>
        </div>
        <div class="table-data">
            <vue3-seamless-scroll
                :hover="true"
                :hover-stop="true"
                :list="tableData"
                :step="0.2"
                class="seamless-warp"
            >
                <div class="table-data-item" v-for="(item,index) in tableData" :key="index">
                    <span>{{ item.province }}</span>
                    <span>{{ item.newProjectNum }}</span>
                </div>
            </vue3-seamless-scroll>
        </div>
    	</div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { getHouseNumCount } from '@/api/buildHouse.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const nums = ref('');
const tableData = ref([]);
const getData = () => {
  getHouseNumCount().then((res) => {
		//console.log(res.data)
    tableData.value = res.data;
    
  });
}
const detailsView = () => {
	//router.push('/buildHouse/reinforceClassicCase');
}
getData();
// 挂载完成
//onMounted(() => {
//	getData();
//})
</script>
<style lang='scss' scoped>

.assy{
	width: 430px;
  height: 285px !important;
  overflow: hidden;
  margin: 10px auto 0;
    color: #fff;
    position: relative;

   	:deep(.el-table) {
    	background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
    	
			opacity: 0.85;
		}
		:deep(.el-table th.el-table__cell){
			font-size: 16px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #E6F4FD;
			background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
			border-bottom: 1px solid #475ADB;
		}
		:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
	    background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%)!important;
		}
		.fontColor1{
			font-size: 16px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #E6F4FD;
		}
		.fontColor{
			font-size: 16px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #46FFFF;
		}
}
.table{
    width: 100%;
    height: 140px;
    margin: 0px auto 0;
    text-align: center;
    &-header{
        color: #E6F4FD;
        font-size: 16px;
        display: flex;
        border-bottom: 1px solid #475ADB;
        padding-bottom: 6px;
        span{
            display: block;
            width: calc(100%/2);
        }
    }
    &-data{
        height: 180px;
        overflow: hidden;
        margin-top: 5px;
        &-item{
            display: flex;
            background:rgba(71, 90, 219, .15) !important;
            height: 30px;
            line-height: 30px;
            margin-top: 4px;
            span{
                display: block;
                width: calc(100%/2);
                color: #46FFFF;
                font-size: 16px;
                &:first-child{
                    color: #E6F4FD;
                }
            }
        }
    }
}
</style>